<template>
  <section class="m-4">
    <el-card>
      <header slot="header">
        <el-button type="success" @click="toEdit()">新增</el-button>
      </header>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="记录ID" prop="id" width="100"/>
        <el-table-column label="任务描述" prop="desc">
          <template slot-scope="{row}">
            <p>{{ row.desc.replace('{$count}', row.count) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="任务类型" prop="type">
          <template slot-scope="{row}">
            <p>{{ referenceTable[row.type] }}</p>
          </template>
        </el-table-column>
        <el-table-column label="任务奖励" prop="rewards">
          <template slot-scope="{row}">
            <section class="flex flex-col">
              <section v-for="(item, index) in row.rewards" :key="index">

                <section v-if="item.type === 'gift'" class="flex items-center">
                  <el-tag>
                    礼物： {{ item.name }} | 价值： {{ item.price }} | 有效期： {{ item.count }} 天
                  </el-tag>
                  <img :src="item.picture" alt="" class="w-8 h-8">
                </section>

                <section v-if="item.type === 'coin'">
                  <el-tag type="warning">金币 | 数量： {{ item.count }}</el-tag>
                </section>

                <section v-if="item.type === 'product'" class="flex items-center">
                  <el-tag type="info">
                    商品： {{ item.name }} | 价值： {{ item.price }} | 有效期： {{ item.count }} 天
                  </el-tag>
                  <img :src="item.picture" alt="" class="w-8 h-8">
                </section>
              </section>
            </section>
          </template>
        </el-table-column>
        <el-table-column label="目标次数" prop="count"/>
        <el-table-column label="是否显示" prop="is_visible">
          <template slot-scope="{row}">
            <el-tag v-if="row.is_visible === 1" type="success">显示</el-tag>
            <el-tag v-else type="danger">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button plain type="primary" @click="toEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />
    </el-card>

    <HTRForm ref="HTRForm" :refresh-data="initData"/>
  </section>
</template>

<script>
import HTRForm from '@/views/anchorReward/comps/HTRForm'
import request from '@/utils/request'
import { referenceTable } from '@/views/anchorReward/config'

export default {

  components: {
    HTRForm
  },
  data() {
    return {
      tableData: [],
      referenceTable,
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  computed: {
    HTRForm() {
      return this.$refs.HTRForm
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(page = 1) {
      try {
        const { data: { list, meta } } = await request({
          url: '/presenter/task/template',
          params: { page }
        })
        this.meta.page = meta.page
        this.meta.total = meta.total
        this.tableData = list
      } catch (e) {
        console.error(e)
      }
    },
    toEdit(row) {
      this.HTRForm.show(row)
    }
  }
}
</script>

<style scoped>

</style>
